<template>
  <div class="common-table" :style="props.style">
    <el-table
      v-bind="$attrs"
      ref="table"
      class="system-table"
      :height="props.height"
      :data="props.data"
      :span-method="spanMethod"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentRowChange"
    >
      <el-table-column
        type="selection"
        align="center"
        width="50"
        v-if="props.showSelection"
      />
      <el-table-column
        label="序号"
        width="60"
        align="center"
        fixed="left"
        v-if="props.showIndex"
      >
        <template #default="scope">
          {{
            (props.page.current - 1) * props.page.pageSize + scope.$index + 1
          }}
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>

    <div class="table-pagination" v-if="props.showPagination">
      <p class="total">共 {{ props.total }} 条</p>
      <el-pagination
        v-model:current-page="props.page.current"
        class="system-page-table"
        small
        background
        :layout="props.pageLayout"
        :total="props.total"
        :page-size="props.page.pageSize"
        :page-sizes="props.pageSizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onActivated, ref } from 'vue';

const props = defineProps({
  data: { type: Array, default: () => [] }, // 数据源
  select: { type: Array, default: () => [] }, // 已选择的数据，与selection结合使用
  showIndex: { type: Boolean, default: true }, // 是否展示index选择，默认否
  showSelection: { type: Boolean, default: true }, // 是否展示选择框，默认否
  showPagination: { type: Boolean, default: true }, // 是否展示分页器，默认是
  style: { // 表格外层样式
    type: Object,
    default: () => {
      return { height: '100%' };
    },
  },
  page: {
    // 分页参数
    type: Object,
    default: () => {
      return { current: 1, pageSize: 10 };
    },
  },
  total: {
    type: Number,
    default: 0,
  },
  pageLayout: {
    type: String,
    default: 'prev, pager, next, sizes, jumper',
  }, // 分页需要显示的东西，默认全部
  pageSizes: { type: Array, default: [10, 20, 50, 100] },
  height: {
    type: String,
    default: '100%',
  }
});

const table: any = ref(null);
let timer: any = null;

const emit = defineEmits([
  'onQuery',
  'selection-change',
  'current-change',
  'span-method',
]);

// 分页相关：监听页码切换事件
const handleCurrentChange = (val: number) => {
  if (timer) {
    props.page.current = 1;
  } else {
    props.page.current = val;
    emit('onQuery', val);
  }
};

// 分页相关：监听单页显示数量切换事件
const handleSizeChange = (val: number) => {
  timer = 'work';
  setTimeout(() => {
    timer = null;
  }, 100);
  props.page.pageSize = val;
  emit('onQuery');
};

// 选择监听器
const handleSelectionChange = (val: []) => {
  emit('selection-change', val);
};

// 表格选择当前行事件
const handleCurrentRowChange = (val: Object) => {
  emit('current-change', val);
};
// 合并行或列的计算方法
const spanMethod = (obj: any) => {
  emit('span-method', obj);
};

// 解决BUG：keep-alive组件使用时，表格浮层高度不对的问题
onActivated(() => {
  table.value.doLayout();
});
</script>

<style lang="scss" scoped>
.common-table {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;

  :deep() {
    .el-table th.el-table__cell {
      color: rgba(1, 18, 90, 1);
    }
    .el-table--small .el-table__cell {
      padding: 6px 0;
      font-size: 13px;
      color: rgba(51, 51, 51, 1);
    }
    .el-pagination.is-background .btn-next.is-active,
    .el-pagination.is-background .btn-prev.is-active,
    .el-pagination.is-background .el-pager li.is-active {
      background-color: rgba(1, 18, 90, 1);
    }
  }
  .system-table {
    flex: 1;
    height: 100%;
  }

  .table-pagination {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .total {
      position: relative;
      top: 8px;
      left: 5px;
      font-size: 14px;
    }
  }

  .system-page-table {
    margin-top: 20px;
  }
}
</style>
